<template>
	<view class="home">
		<u-sticky offset-top="0">
			<view class="tophead">
				<uni-icons type="left" color="#666" size="26" @click="retFn"></uni-icons>
				<view class="">
					历史记录详情
				</view>
				<view class="">
				</view>
			</view>
		</u-sticky>
		<!-- 内容 -->
		<view class="popup_box">
			<view class="popup_text">
				<view class="">
					测站：{{historicalShow.surveyStationName}}
				</view>
				<view class="">
					测段：{{historicalShow.name}}
				</view>
				<view class="">
					测报人：{{historicalShow.informant}}
				</view>
			</view>
			<view class="popup_list">
				<view class="popup_it">
					<view class="popup_top">
						<view class="popup_l">
							
						</view>
						<view class="popup_cona">
							均匀度
						</view>
						<view class="popup_conb">
							系数
						</view>
						<view class="popup_conb">
							流速
						</view>
					</view>
				</view>

				<view class="popup_it" v-for="(i,index) in historicalShow.measuredData" :key="index">
					<view class="popup_top">
						<view class="popup_l">
							{{index + 1}}A
						</view>
						<view class="popup_cona">
							{{i.junyundu}}
						</view>
						<view class="popup_conb">
							{{i.xishu}}
						</view>
						<view class="popup_conb">
							{{i.aveTy}}
						</view>
					</view>
				</view>
			</view>
			<view class="butt_d">
				<view class="butt_box">
					水深：{{historicalShow.depthWater}} 米
				</view>
				<view class="butt_box" v-if="historicalShow.currentMeterType == 3">
					多普勒测流
				</view>
				<!-- 				<view class="butt_box">
					测量方法：{{historicalShow.measuringMethod}}点法
				</view> -->
			</view>
			<view class="butt_ll">
				流量：{{historicalShow.waterFlow}}
			</view>
			<view class="butt_back" @click="retFn">
				返回
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				historicalShow: {}, //历史详情

			}
		},
		onLoad(option) {
			this.deviceListFn(option.id)
		},
		methods: {
			// 测站列表
			deviceListFn(id) {
				uni.$u.http.get('/device/current_meter_record/getInfo/' + id).then(res => {
					if (res.code == 200) {

						this.historicalShow = res.data
						this.historicalShow.measuredData = JSON.parse(res.data.measuredData)
						this.historicalShow.waterFlow = res.data.waterFlow
						console.log('res', this.historicalShow);
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			retFn() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	.tophead {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 60rpx 30rpx 10rpx 30rpx;
		color: #000000;
		background-color: #d6e1ec;
	}

	// 弹出详情
	.popup_box {
		background-color: #d6e1ec;

		.popup_text {
			padding: 30rpx;
			font-size: 50rpx;
			font-weight: bold;
			color: #22464d;
		}

		.popup_three {

			.popup_three_it {
				border-radius: 15rpx;
				padding: 10rpx;
				margin: 20rpx;
				background-color: rgba(126, 157, 166, 0.3);

				.popup_three_top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #1d4046;

					.popup_top_l {}

					.popup_top_r {
						font-size: 45rpx;
						padding: 5rpx 10rpx;
						border-radius: 10rpx;
						background-color: rgba(126, 157, 166, 0.3);
					}
				}

				.popup_three_a {
					color: #000000;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 45rpx;

					.popup_top_x {
						width: 80rpx;
						margin-top: 10rpx;
						text-align: center;
						// background-color: #2a4d7d;
					}

					.popup_top_z {
						width: 100rpx;
						margin-top: 10rpx;
						text-align: center;
						// background-color: #2a4d7d;
					}

					.popup_top_zz {
						width: 180rpx;
						margin-top: 10rpx;
						text-align: center;
						// background-color: #2a4d7d;
					}

					.popup_top_y {
						width: 160rpx;
						margin-top: 10rpx;
						border-radius: 10rpx;
						text-align: center;
						background-color: rgba(126, 157, 166, 0.3);
					}
				}
			}
		}

		.popup_list {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;

			.popup_it {
				width: 700rpx;
				padding: 10rpx;
				border-radius: 10rpx;
				background-color: rgba(177, 142, 124, 0);
				color: #000000;

				.popup_top {
					display: flex;
					justify-content: space-between;
					font-size: 50rpx;

					.popup_l {
						width: 80rpx;
						text-align: center;
					}

					.popup_cona {
						width: 200rpx;
						text-align: center;
						border-radius: 5rpx;
						background-color: rgba(126, 157, 166, 0.3);
					}

					.popup_conb {
						width: 200rpx;
						text-align: center;
						border-radius: 5rpx;
						background-color: rgba(126, 157, 166, 0.3);
					}

					.popup_r {
						width: 200rpx;
						text-align: center;
						border-radius: 5rpx;
						color: #000000;
						background-color: rgba(126, 157, 166, 0.6);
					}
				}
			}
		}

		.butt_d {
			margin: 10rpx;
			font-size: 40rpx;
			color: #000000;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.butt_box {
				width: 338rpx;
				padding: 10rpx;
				border-radius: 10rpx;
				text-align: center;
				// border: 1rpx solid #000000;
				background-color: rgba(131, 170, 177, 0.2);
			}
		}

		.butt_ll {
			padding: 10rpx;
			margin: 10rpx;
			font-size: 50rpx;
			border-radius: 10rpx;
			text-align: center;
			color: #000000;
			background-color: rgba(125, 168, 177, 0.5);
		}

		.butt_back {
			padding: 10rpx;
			margin: 50rpx 0;
			font-size: 50rpx;
			border-radius: 10rpx;
			text-align: center;
			color: #ffffff;
			background-color: #426b6f;
		}
	}
</style>
<style>
	page {
		background-color: #e0ecec;
	}
</style>